<template>
  <div ref="cardPhoneCardlist" :key="curPage" class="card-phone-Cardlist card-phone-layout" @keydown.delete.exact="onDeleteCard" tabindex="998">

    <template v-if="cardLists.length > 0">
      <!-- {{cardLists}} -->
      <CardPhoneTransition :list="cardLists">
        <template v-slot:node="{ item, index }">
          <CardPhoneItemDrag :key="item.itemid" :item="item" :index="index" :draggable="!bIsParentEditable">
            <!-- 非列表card -->
            <component v-if="!bIsCardTypeOfComb('CARD_' + item.card_type)" :is="'Card' + item.card_type" :item="item"></component>
            <!-- 列表card -->
            <component v-if="bIsCardTypeOfComb('CARD_' + item.card_type)" :is="'Card' + item.card_type" :item="item" :maskable="!curTarget.parentId == item.itemid">

              <CardPhoneTransition :list="combCardLists(item)">
                  <template v-slot:node="{ item: childItem, index: childIndex }">
                    <CardPhoneItemDrag v-if="!bIsCardTypeOfComb('CARD_' + childItem.card_type)" :key="childItem.itemid" :item="childItem" :index="childIndex" :draggable="bIsParentEditable">
                      <!-- 非列表card -->
                      <component :is="'Card' + childItem.card_type" :item="childItem"></component>
                    </CardPhoneItemDrag>
                  </template>
              </CardPhoneTransition>

            </component>
          </CardPhoneItemDrag>
        </template>
      </CardPhoneTransition>
    </template>

  </div>
</template>

<script>
  import CardCommonComputed from '@/views/card/js/mixins/card-common-computed.js';
  import CardComponentsGather from '@/views/card/js/mixins/card-components-gather.js';
  import { defineAsyncComponent } from 'vue';
  import { mapActions } from 'vuex'
  export default {
    name: 'cardPhoneCardlist',
    mixins: [CardCommonComputed, CardComponentsGather],
    components: {
      'CardPhoneTransition': defineAsyncComponent(() => import('@/views/card/content/CardPhoneTransition.vue')),
      'CardPhoneItemDrag': defineAsyncComponent(() => import('@/views/card/content/CardPhoneItemDrag.vue')),
    },
    methods: {
      /* update */
      onDeleteCard() {
        // 0. if selected?
        if(this.curSelectCardIndex < 0) return;

        // 1. if CardGroup is editable
        let newCardGroup = _.cloneDeep(this.curLists);
        newCardGroup.splice(this.curSelectCardIndex, 1);  // cardGroup 删除 card
        this.updateCardLists(newCardGroup);  // update cardLists

        // 4. select / drag id 清除
        this.dragEnterTargetId = '';

        // 5. updateCurTarget
        this.updateCurTarget({
          ...this.curTarget,
          itemId: '',
        });
      },
    },
  }
</script>

<style lang="scss"></style>
